<template>
  <div class="criminalcase">
    <div class="mychart" ref="myChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { postAction, getAction } from '@/api/manage.js'

export default {
  data() {
    return {
      myChart: null,
      chartData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getAction('/topic/data/listAllBySql/dy_dp_shzl_zaxsaj_month').then(res => {
        if (res.result && res.result) {
          this.chartData = res.result
          this.initChart()
        }
      })
    },
    initChart() {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart)
      }
      let xAxisData = []
      let yAxisCcData = []
      let yAxisLaData = []
      let yAxisPaData = []
      this.chartData.forEach((item) => {
        xAxisData.push(item.year)
        yAxisCcData.push(item.check_num)
        yAxisLaData.push(item.build_num)
        yAxisPaData.push(item.deal_num)
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: true,
          x: 'center', // 设置图例水平位置为居中
          y: 'top', // 设置图例垂直位置为底部
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#e1e1e1'
              }
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              textStyle: {
                fontSize: 12,
                color: '#e1e1e1'
              },
              rotate: '45'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：件',
            nameTextStyle: {
              // 轴标题，在xAxis或yAxis根下
              color: '#e1e1e1',
              fontSize: 12
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontSize: 12,
                color: '#e1e1e1'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(255,255,255,0.3)'
              }
            }
          }
        ],
        series: [
          {
            name: '治安查处',
            type: 'line',
            stack: 'Total',
            lineStyle: {
              color: 'rgba(81, 172, 233, 1)', // 线的颜色
              width: 3, // 线的宽度
              type: 'solid' // 线的类型，默认为实线
            },
            // 折线图上点的样式
            symbol: 'circle', // 点的形状，可选值包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 等
            symbolSize: 8, // 点的大小
            // 点的样式设置
            itemStyle: {
              color: 'rgba(81, 172, 233, 1)', // 点的颜色
              borderColor: '#fff', // 点的边框颜色
              borderWidth: 3 // 点的边框宽度
            },
            // smooth: true,
            // 开启区域背景渐变效果
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 1, // 起点位置
            //       color: 'rgba(255,231,101,0.01)' // 起点颜色
            //     },
            //     {
            //       offset: 0, // 结束位置
            //       color: 'rgba(255,231,101,0.18)' // 结束颜色
            //     }
            //   ])
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                fontsize: 16,
                color: '#FFDD00'
              },
              valueFormatter: function (value) {
                return value
              }
            },
            data: yAxisCcData
          },
          {
            name: '刑事立案',
            type: 'line',
            stack: 'Total',
            lineStyle: {
              color: 'rgba(85, 210, 151, 1)', // 线的颜色
              width: 3, // 线的宽度
              type: 'solid' // 线的类型，默认为实线
            },
            // 折线图上点的样式
            symbol: 'circle', // 点的形状，可选值包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 等
            symbolSize: 8, // 点的大小
            // 点的样式设置
            itemStyle: {
              color: 'rgba(85, 210, 151, 1)', // 点的颜色
              borderColor: '#FFFFFF', // 点的边框颜色
              borderWidth: 3 // 点的边框宽度
            },
            // smooth: true,
            // 开启区域背景渐变效果
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 1, // 起点位置
            //       color: 'rgba(255,231,101,0.01)' // 起点颜色
            //     },
            //     {
            //       offset: 0, // 结束位置
            //       color: 'rgba(255,231,101,0.18)' // 结束颜色
            //     }
            //   ])
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                fontsize: 16,
                color: '#FFDD00'
              },
              valueFormatter: function (value) {
                return value
              }
            },
            data: yAxisLaData
          },
          {
            name: '刑事破案',
            type: 'line',
            stack: 'Total',
            lineStyle: {
              color: 'rgba(243, 205, 77, 1)', // 线的颜色
              width: 3, // 线的宽度
              type: 'solid' // 线的类型，默认为实线
            },
            // 折线图上点的样式
            symbol: 'circle', // 点的形状，可选值包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 等
            symbolSize: 8, // 点的大小
            // 点的样式设置
            itemStyle: {
              color: 'rgba(243, 205, 77, 1)', // 点的颜色
              borderColor: '#FFFFFF', // 点的边框颜色
              borderWidth: 3 // 点的边框宽度
            },
            // smooth: true,
            // 开启区域背景渐变效果
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 1, // 起点位置
            //       color: 'rgba(255,231,101,0.01)' // 起点颜色
            //     },
            //     {
            //       offset: 0, // 结束位置
            //       color: 'rgba(255,231,101,0.18)' // 结束颜色
            //     }
            //   ])
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                fontsize: 16,
                color: '#FFDD00'
              },
              valueFormatter: function (value) {
                return value
              }
            },
            data: yAxisPaData
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.criminalcase {
  width: 100%;
  .mychart {
    width: 100%;
    height: 240px;
  }
}
</style>
